<template>
	<p>张橙仔的成绩：</p> <input type="text" v-model="socre">
	<p v-show="type==='A'">优秀</p>
	<p v-show="type==='B'">良好</p>
	<p v-show="type==='C'">及格</p>
	
	
	<button @click="type='A'">A:切换成优秀</button>
	<button @click="type='B'">B:切换成良好</button>
	<button @click="type='C'">C:切换成及格</button>
</template>

<script setup>
	import { ref } from 'vue'

	//演示v-show指令
	//v-show与v-if都用来决定某一个元素是否在页面上显示出来。
	//v-show的原理是通过为元素添加或移除display: none样式来实现元素的显示或隐藏。
	//当需要频繁切换某个元素的显示或隐藏时，使用v-show会更节省性能开销；
	//而当只需要切换一次显示或隐藏时，使用v-if更合理
	//定义数据
	
	const type=ref('A')
	const isShow=ref(false)
	const socre=ref(90)

</script>

<style>
</style>